<template>
    <!-- 评论 -->
    <div class="user">
        <h6><span ref="total" v-show="judge">{{value.total}}</span><span ref="totalTwo"
                v-show="!judge">{{value.total}}</span> 条评论</h6>
        <ul ref="ul">
            <li v-for="(ele,index) in value.list" :key="ele.commentid">
                <div class="left">
                    <div class="img-box"> <img v-lazy="ele.userinfo.avatar" alt=""></div>
                    <div class="words">
                        <h6>{{ele.userinfo.username}}</h6>
                        <p class="use-time">{{ele.addtime|dateServer}}</p>
                        <p class="use-name">{{ele.content}}</p>
                    </div>
                </div>
                <div class="right iconfont icon-dianzan1"
                    @click="praise($event,index,{img:ele.userinfo.avatar,name:ele.userinfo.username,words:ele.content,id:ele.commentid,time:ele.addtime})">
                    {{ele.count_approve}}</div>
            </li>
        </ul>
        <h5 class="end">- End -
            <div class="written van-hairline--top" v-show="show">
                <van-field v-model="message" rows="1" autosize type="textarea" placeholder="请输入留言" :maxlength="15" />
                <van-button color="#ccc" @click="insert">发送</van-button>
            </div>
        </h5>
        <div class="pen" v-show="!show">
            <div class="inp" @click="showStart"><span class="iconfont icon-bianji"></span>
            </div>
            <div class="chart">
                <div>
                    <span ref="span" class="iconfont icon-aixin" @click="Collection"></span>
                    <span>{{value.like}}</span>
                </div>
                <div>
                    <span class="iconfont icon-daochu"></span>
                    <span>{{value.share}}</span>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {
        mapMutations
    } from "vuex"
    import {
        Toast
    } from 'vant';
    export default {
        props: ['value'],
        data() {
            return {
                message: '',
                stay: [], //我的评论
                show: false,
                judge: true
            }
        },
        methods: {
            insert() {
                // if (JSON.parse(sessionStorage.getItem("user"))) {
                console.log(this.message);
                let li = document.createElement('li');
                li.innerHTML = `                <div class="left">
                    <div class="img-box"> <img src="https://img2.baidu.com/it/u=2852307801,4237997928&fm=26&fmt=auto" alt=""></div>
                    <div class="words">
                        <h6>隐</h6>
                        <p class="use-time">2021.12.22</p>
                        <p class="use-name">${this. message}</p>
                    </div>
                </div>
                <div class="right iconfont icon-dianzan1"  @click="praise">0</div>`
                // let ul = document.querySelector('ul');
                let ul = this.$refs.ul;
                ul.appendChild(li);
                this.addmyCommennt({
                    value: this.message,
                    tiem: +new Date
                });
                this.message = '';
                this.$refs.totalTwo.textContent++;
                this.show = false
                this.judge = false
                // }
            },
            showStart() {
                if (JSON.parse(sessionStorage.getItem("user"))) {
                    this.show = true;
                } else {
                    Toast('请登录')
                }
            },
            praise(e, index, user) {
                if (JSON.parse(sessionStorage.getItem("user"))) {
                    if (e.target.classList.contains('icon-dianzan')) {
                        e.target.classList.replace('icon-dianzan', 'icon-dianzan1')
                        e.target.textContent--;
                        this.stay.splice(index, 1)
                    } else {
                        e.target.classList.replace('icon-dianzan1', 'icon-dianzan')
                        e.target.textContent++;
                        this.stay.push(user);
                    }
                } else {
                    Toast('请登录')
                }
            },
            Collection(e) {
                if (JSON.parse(sessionStorage.getItem("user"))) {
                    if (e.target.classList.contains('icon-aixin1')) {
                        e.target.classList.replace('icon-aixin1', 'icon-aixin')
                        e.target.nextElementSibling.textContent--
                    } else {
                        e.target.classList.replace('icon-aixin', 'icon-aixin1')
                        e.target.nextElementSibling.textContent++
                    }
                } else {
                    Toast('请登录')
                }
            },
            ...mapMutations(['addCollectionLists', 'addComment', 'addmyCommennt']),
            cancellation() {
                console.log('vuex传');
                if (this.$refs.span.classList.contains('icon-aixin1')) {
                    this.addCollectionLists({
                        postid: this.value.postid,
                        type: this.value.type,
                        title: this.value.title
                    })
                    this.$refs.span.classList.replace('icon-aixin1', 'icon-aixin');
                }
                if (this.stay.length) {
                    this.addComment(this.stay)
                }
                if (!this.judge) {
                    let ul = this.$refs.ul;
                    ul.removeChild(ul.lastElementChild)
                    this.judge = true
                }
            }
        }
    }
</script>

<style lang="less">
    //次数scoped会导致创建并插入的元素类名无效
    .user {
        padding: 30px 16px 0;

        &>h6 {
            padding-bottom: 16px;
        }

        li {
            display: flex;
            padding: 14px 0;
            border-bottom: 1px solid #ccc;

            .left {
                display: flex;
                flex-wrap: wrap;

                .img-box {
                    width: 34px;
                    height: 30px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 1px solid #ccc;
                    margin-right: 10px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .words {
                    width: 268px;

                    h6 {
                        font-size: 10px;
                        color: #ccc;
                    }

                    .use-time {
                        color: #ccc;
                        font-size: 10px;
                        padding: 6px 0 10px
                    }

                    .use-name {
                        font-size: 16px;
                    }
                }

            }

            .right {
                font-size: 8px;
                color: #ccc;
            }
        }

        .end {
            font-size: 12px;
            line-height: 40px;
            text-align: center;
            color: #ccc;
            position: relative;

            .written {
                display: flex;
                position: absolute;
                bottom: 0;
                width: 100%;
            }
        }

        .pen {
            width: 100%;
            height: 50px;
            background-color: #fff;
            position: sticky;
            bottom: 0;
            display: flex;
            padding: 10px 0;
            box-sizing: border-box;
            border-top: 1px solid #EFEFEF;

            .inp {
                flex: 1;
                height: 30px;
                line-height: 30px;
                border-radius: 20px;
                border: 1px solid #EFEFEF;
                margin-right: 20px;
                display: flex;
                overflow: hidden;
                position: relative;

                // button {
                //     position: absolute;
                //     right: 0;
                //     top: 0;
                //     height: 100%;
                //     width: 30px;
                //     border: 0;
                // }

                // .van-cell {
                //     padding: 0;
                // }

                // .van-field {
                //     width: 100%;
                // }

                span {
                    font-size: 20px;
                    color: #ccc;
                    margin-left: 10px;
                }
            }

            .chart {
                flex: 1;
                display: flex;

                div {
                    font-size: 14px;
                    color: #ccc;
                    flex: 1;
                    line-height: 30px;
                    text-align: center;
                }
            }
        }
    }
</style>